<script setup lang="ts">
import { ref } from "vue";

// 声明 props 类型
export interface FormProps {
  formInline?: {
    status: string;
    remark: string;
    cIds: number[];
    remark2: string;
  };
}

// 声明 props 默认值
// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    status: undefined,
    remark: undefined,
    cIds: [],
    remark2: undefined
  })
});

// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
const newFormInline = ref(props.formInline);

const list = ref([
  "请填写正确的收款信息",
  "请填写正确的身份证号码",
  "请填写正确的公司名称或者姓名",
  "请不要使用信用卡收款",
  "请填写正确的银行卡号",
  "请填写正确的支付宝账号",
  "其它"
]);
</script>

<template>
  <el-form :model="newFormInline">
    <el-form-item label="状态">
      <el-select
        v-model="newFormInline.status"
        class="w-[320px]!"
        placeholder="请选择处理结果"
      >
        <el-option label="待审核" value="0" />
        <el-option label="通过" value="1" />
        <el-option label="驳回" value="2" />
      </el-select>
    </el-form-item>

    <el-form-item label="备注">
      <el-select
        v-model="newFormInline.remark"
        class="w-[320px]!"
        placeholder="请选择备注"
      >
        <el-option
          v-for="(item, index) in list"
          :key="index"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="newFormInline.remark == '其它'" label="其它">
      <el-input
        v-model="newFormInline.remark2"
        class="w-[320px]!"
        placeholder="请输入其它备注"
      />
    </el-form-item>
  </el-form>
</template>
